﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
    <title>jquery mobile</title>
    <link href="../../js/jqmobile/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jqmobile/jquery.mobile-1.4.5.min.js"></script>
    

    <style type="text/css">
        #controlgroupid .ui-controlgroup-controls {
            width: 100%;
        }

        #controlgroupid a {
            width: 25%;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!--
        作者：郭胜
        时间：2018-03-05
        描述：第一个页面
    -->
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>第一个页面</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="请输入……">
                <li>
                    <a href="#">
                        <img src="js/images/other/4.jpg" />
                        <h3>姓名：刘德华</h3>
                        <p>男人哭吧哭吧不是罪</p>
                        <p>再强的男人也有权利去疲惫</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="js/images/other/4.jpg" />
                        <h3>姓名：刘德华</h3>
                        <p>冰雨</p>
                        <p>冷冷的冰雨在你的脸上胡乱的拍</p>
                    </a>
                </li>
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="controlgroup" data-type="horizontal" id="controlgroupid">
                <a href="#" data-role="button" data-icon="star" data-iconpos="top">首页</a>
                <a href="#" data-role="button" data-icon="search" data-iconpos="top">详情</a>
                <a href="#" data-role="button" data-icon="refresh" data-iconpos="top">个人</a>
                <a href="#page2" data-transition="flip" data-role="button" data-icon="power" data-iconpos="top">设置</a>
            </div>
        </div>
    </div>

    <!--
        作者：郭胜
        时间：2018-03-05
        描述：第二个页面
    -->
    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>第二个页面</h1>
        </div>
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="请输入……">
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
                <li><a href="#">郭胜</a></li>
                <li>
                    <a href="#">
                        <img src="js/images/other/4.jpg" />
                        <h3>姓名：刘德华</h3>
                        <p>男人哭吧哭吧不是罪</p>
                        <p>再强的男人也有权利去疲惫</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="js/images/other/4.jpg" />
                        <h3>姓名：刘德华</h3>
                        <p>冰雨</p>
                        <p>冷冷的冰雨在你的脸上胡乱的拍</p>
                    </a>
                </li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="controlgroup" data-type="horizontal" id="controlgroupid">
                <a href="#page1" data-transition="slidedown" data-role="button" data-icon="star" data-iconpos="top">首页</a>
                <a href="#" data-role="button" data-icon="search" data-iconpos="top">详情</a>
                <a href="#" data-role="button" data-icon="refresh" data-iconpos="top">个人</a>
                <a href="#" data-role="button" data-icon="power" data-iconpos="top">设置</a>
            </div>
        </div>
    </div>
</body>
</html>
